<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="/css/article.css">
    <script src='./node_modules/layui/src/layui.js'></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

    <div class="layui-card">
        <!-- 筛选区域 -->
        <form class="layui-form layui-inline" id="form-search">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">文章分类</label>
                <div class="layui-input-block">
                    <select name="cate_id"></select>
                </div>
            </div>



            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id='keywords' placeholder="关键字">
                </div>
            </div>


            <!-- 发布时间 -->
            <div class="layui-inline">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-inline" id="test-range">
                    <input type="text" id="startDate" class="layui-input" placeholder="&emsp;开始日期&emsp;&emsp;&emsp;&emsp;至&emsp;&emsp;&emsp;&emsp;结束日期">
                </div>
            </div>

            <!-- 按钮 -->
            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-danger id='check">查询</button>
                <button class="layui-btn layui-btn-primary" id="btnReset">重置</button>
            </div>
        </form>

        <!-- 域 -->
        <script>
            layui.use('form', function() {
                var form = layui.form;
            });
        </script>
    </div>



    <!-- 时间 -->
    <script>
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#test-range',
                range: ['#startDate', '#endDate'] //指定元素
            });
        });
    </script>


    <!-- 卡片 -->
    <div class="layui-card-body">
        <!-- 列表区域 -->
        <table class="layui-table" lay-skin="nob">
            <colgroup>
                <col width="80">
                <col width="80">
                <col>
                <col width="150">
                <col>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>文章ID</th>
                    <th>文章标题</th>
                    <th>文章作者</th>
                    <th>文章分类</th>
                    <th>缩列图</th>
                    <th>阅读次数</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>



    <!-- 分页 -->
    <!-- 分页区域 -->
    <div id="pageBox"></div>



    <!-- 列表的模板引擎 -->
    <script type="text/html" id="tpl-table">
        {{each data}}
        <tr>
            <td>{{++$index}}</td>
            <td>{{$value.id}}</td>
            <td>{{$value.title}}</td>
            <td>{{$value.author}}</td>
            <td>{{$value.catename}}</td>
            {{if $value.picimg.length != 1}}
            <td>
                <img src="https://img2.baidu.com/it/u=2739975249,3099707811&fm=15&fmt=auto&gp=0.jpg" alt="">
            </td>
            {{else}}
            <td>
                <img src="{{$value.picimg[0].url}}" alt="">
            </td>
            {{/if}}
            <td>{{$value.click}}</td>
            <td>{{$value.createtime|dataFormat}}</td>
            <td>
                <a href="./article_pub.html">
                    <button type="button" class="layui-btn layui-btn-radius layui-icon-edit layui-icon layui-icon-edit layui-btn-xs" id="edit-box" data-id="{{$value.id}}"></button>
                </a>
                <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs btn-delete" data-id="{{$value.id}}">
                    <i class='layui-icon layui-icon-delete'></i>
                </button>
            </td>
        </tr>
        {{/each}}
    </script>

    <!-- 分类可选项的模板引擎 -->
    <script type="text/html" id="tpl-cate">
        <option value="">文章分类</option>
        {{each data}}
        <option value="{{$value.cateid}}">{{$value.catename}}</option>
        {{/each}}
    </script>



    <script src='./js/jquery.min.js'></script>
    <script src='./js/template-web.js'></script>
    <script src='/js/article.js'></script>


</body>
<script>
</script>

</html>